<%--
  Created by IntelliJ IDEA.
  User: Ac
  Date: 2024-12-29
  Time: 23:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<html>
<head>
    <meta charset="UTF-8">
    <!--edge浏览器H5兼容设置-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--360浏览器H5兼容设置-->
    <meta name="renderer" content="webkit" />
<%--    <title>${requestScope.productTypeName}</title>--%>
    <title>电脑商城</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--导入核心文件-->
    <script src="/computershop/static/web/bootstrap3/js/holder.js"></script>
    <link href="/computershop/static/web/bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="/computershop/static/web/bootstrap3/jquery-1.8.3.min.js"></script>
    <script src="/computershop/static/web/bootstrap3/js/bootstrap.js"></script>
    <script src="/computershop/static/web/js/menu.js" type="text/javascript" charset="utf-8"></script>
    <!-- 字体图标 -->
    <link rel="stylesheet" href="/computershop/static/web/bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="/computershop/static/web/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="/computershop/static/web/css/webindex.css" />
    <link rel="stylesheet" type="text/css" href="/computershop/static/web/css/footer.css" />
    <link rel="stylesheet" type="text/css" href="/computershop/static/web/css/top.css" />
    <link rel="stylesheet" type="text/css" href="/computershop/static/web/css/search.css" />
    <link rel="stylesheet" type="text/css" href="/computershop/static/web/css/imgmove.css" />
    <script src="/computershop/static/web/js/search.js" type="text/javascript" charset="utf-8"></script>
    <script src="/computershop/static/web/js/imgmove.js" type="text/javascript" charset="utf-8"></script>

    <style>
        #productBack{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #back{
            width: 1600px;
            display: flex;
            flex-wrap: wrap;
        }
        .productBox{
            width: 300px;
            height: 350px;
            background-color: white;
            float: left;
            margin: 10px;
        }
        .productBox:hover{
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        }
        .productImage{
            position: relative;
            width: 300px;
            float: none;
            margin-bottom: 5px;
        }
        .productPrice{
            position: relative;
            left: 10px;
            font-size: 20px;
            margin-bottom: 15px;
            color: red;
        }   
        .productTitle{
            width: 95%;
            position: relative;
            top: -50px;
            left: 10px;
            font-size: 15px;
            margin-bottom: 5px;
            height: 20px;
        }
        #addback{
            position: relative;
            bottom: 50px;
            left: 135px;
        }
        #aTitle{
            text-decoration: none;
        }
        #aTitle:hover{
            color: #2a6496;
            font-weight: bold;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            // 加入收藏时，♥的实心空心切换
            $("#add-fav-false").toggle(function() {
                var id = $(this).data("id");
                $.ajax({
                    url:"/computershop/web/addFavor",
                    type:"get",
                    data:{pid:id}
                });
                $(this).html("<span class='fa fa-heart'></span>取消收藏");
            }, function() {
                var id = $(this).data("id");
                $.ajax({
                    url:"/computershop/web/delFavor",
                    type:"get",
                    data:{pid:id}
                });
                $(this).html("<span class='fa fa-heart-o'></span>加入收藏");
            });
            $("#add-fav-true").toggle(function() {
                var id = $(this).data("id");
                $.ajax({
                    url:"/computershop/web/delFavor",
                    type:"get",
                    data:{pid:id}
                });
                $(this).html("<span class='fa fa-heart-o'></span>加入收藏");
            }, function() {
                var id = $(this).data("id");
                $.ajax({
                    url:"/computershop/web/addFavor",
                    type:"get",
                    data:{pid:id}
                });
                $(this).html("<span class='fa fa-heart'></span>取消收藏");
            });
        });
    </script>
</head>
<body>
    <!--头部-->
    <jsp:include page="/WEB-INF/web/inc/header.jsp"></jsp:include>
    <!--头部结束-->
    <!--商品罗列-->
    <div id="productBack">
        <div id="back">
            <c:forEach items="${requestScope.productListByCategory}" var="product">
                <div class="productBox">
                    <a href="/computershop/web/product?pid=${product.id}"><img class="productImage" src="/computershop/static/web/${product.image}collect.png"></a>
                    <div class="productPrice">价格: ¥${product.price}</div>
                    <br><br>
                    <a id="aTitle" href="/computershop/web/product?pid=${product.id}"><div class="productTitle">${product.title}</div></a>        
                    <br>
                    <span id="addback">
                        <c:set var="favor" value="${true}" />
								<c:forEach items="${sessionScope.userFavorList}" var="p">
                                    <c:if test="${not empty p and not empty product and p.id eq product.id}">
                                        <c:set var="favor" value="${false}" />
                                    </c:if>
                                </c:forEach>
								<c:if test="${favor}">
                                    <a href="javascript:void(0)" id="add-fav-false" class="btn btn-default btn-xs add-fav" data-id = "${product.id}"><span class="fa fa-heart-o"></span>加入收藏</a>
                                </c:if>
								<c:if test="${!favor}">
                                    <a href="javascript:void(0)" id="add-fav-true" class="btn btn-default btn-xs add-fav" data-id = "${product.id}"><span class='fa fa-heart'></span>取消收藏</a>
                                </c:if>
                        <a href="/computershop/web/cart?id=${product.id}" class="btn btn-default btn-xs add-cart"><span class="fa fa-cart-arrow-down"></span>加入购物车</a>
                    </span>
                </div>                    
            </c:forEach>
        </div>
    </div>
<%--    <div class="col-md-offset-1 col-md-10">--%>
<%--        <p align="center">--%>
<%--            <a href="#">上一页</a>--%>
<%--            <a href="#">1</a>--%>
<%--            <a href="#">2</a>--%>
<%--            <a href="#">3</a>--%>
<%--            <a href="#">下一页</a>--%>
<%--        </p>--%>
<%--    </div>--%>
    <!--页脚开始-->
    <jsp:include page="/WEB-INF/web/inc/foot.jsp"></jsp:include>
    <!--页脚结束-->
</body>
</html>
